<template>
  <view v-if="visible" class="water-splash">
    <view
      v-for="(drop, index) in waterDrops"
      :key="index"
      class="water-drop"
      :style="{
        left: drop.x + '%',
        animationDelay: drop.delay + 'ms',
        animationDuration: drop.duration + 'ms',
        opacity: drop.opacity
      }"
    ></view>
  </view>
</template>

<script>
export default {
  name: 'WaterSplash',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    dropCount: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      waterDrops: []
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.generateDrops()

        // 动画结束后自动隐藏
        setTimeout(() => {
          this.$emit('animation-end')
        }, 1000)
      }
    }
  },
  methods: {
    generateDrops() {
      this.waterDrops = []

      for (let i = 0; i < this.dropCount; i++) {
        this.waterDrops.push({
          x: Math.random() * 100, // 水滴的水平位置（百分比）
          delay: Math.random() * 100, // 动画延迟
          duration: 600 + Math.random() * 400, // 动画持续时间
          opacity: 0.6 + Math.random() * 0.4 // 水滴透明度
        })
      }
    }
  }
}
</script>

<style lang="scss">
.water-splash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;

  .water-drop {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #4fc3f7;
    border-radius: 50%;
    bottom: 0;
    transform: translateY(0);
    animation: water-splash-animation 800ms ease-out forwards;
  }
}

@keyframes water-splash-animation {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0);
    opacity: 0;
  }
}
</style>
